<template>
    <div class="box">
        <ul class="photo-list">

                <li v-for="item in imgcts" :key="item.id">
                    <router-link :to="'/home/photoDetail/'+ item.id ">
                    <img v-lazy="item.imgUrl">
                        <!--imgcts 是父组件从数据库获取的，然后传给子组件，这里有个问题。（个人证实，不知道对不对）-->
                        <!--其实我们最开始渲染这个组件的时候imgcts其实是个空数组里面没有值的，原因是我们父组件从服务器取数据的时候-->
                        <!--是异步请求，在父组件获取数据的中途不妨碍我们子组件的渲染，当子组件在渲染中发现父组件给我传的值其实是空数组（此时父组件-->
                        <!--可能从服务器中已经取到了数据或者没有取到数据，如果是取到了就将数据放到队列中去了，当我们整个页面渲染完成后才自动完成回调），-->
                        <!--所以其实在第一次渲染的时候这个组件在页面上是没有数据的，然而vue本身却是响应式渲染，所以第二次当我们整个页面渲染完成之后父组件-->
                        <!--也从队列中获取到了数据，当数据发生改变时，vue机制会内部动态帮我们实现数据绑定，所以也就会默认父组件的数据传递给字组件，字组件-->
                        <!--把数据渲染到页面上(因为其实内部执行的顺序非常快，可能我们在视觉上看效果的时候并没有觉得什么)。-->
                        <!--在这里有个原因是：当我们如果渲染页面数据的时候会默认响应数据，但如果是属性绑定并不会触发响应-->
                        <!--如: &lt;!&ndash;<div :class="item.id">&ndash;&gt; 在这里面item.id 如果是把数据渲染给页面是可以实现的,但如果是想要将数据绑定属性节点上-->
                        <!--则行不通,值为空,准确应该是undefined-->
                        <div class="info">
                            <h1 class="info-title">{{ item.title }}</h1>
                            <span class="info-body">{{ item.zhaiYao }}</span>
                        </div>
                    </router-link>
                </li>
        </ul>
    </div>
</template>

<script>
    export default {
        name: "ImgContent" ,
        data() {
            return {
                
            };
        },
        methods: {
        },
        props: ['imgcts'],
    }
</script>

<style lang="scss" scoped>
    .box {
        .photo-list {
            list-style: none;
            padding: 10px;
            padding-bottom: 0;
            li {
                position: relative;
                background-color: #CCCCCC;
                text-align: center;
                margin-bottom: 15px;
                /*边框阴影*/
                box-shadow: 0 0 10px #999;
                img[lazy=loading] {
                    width: 40px;
                    height: 300px;
                    margin: auto;
                }
                img {
                    width: 100%;
                }
                .info {
                    position: absolute;
                    bottom: 0;
                    color: white;
                    font-size: 12px;
                    text-align: left;
                    /*最大显示高度*/
                    max-height: 84px;
                    /*半透明*/
                    background-color: rgba(0, 0, 0, 0.4);
                    .info-title {
                        font-size: 14px;
                        font-weight: bold;
                    }
                }


                /*info 区域切换使用动画效果*/
                .v-enter {
                    opacity: 0;
                    transform: translateY(100%);
                }
                .v-leave-to {
                    opacity: 0;
                    transform: translateY(100%);
                    position: absolute;
                }

                .v-enter-active,
                .v-leave-active {
                    transition: all 0.2s ease ;
                }

            }
        }
    }
</style>